<template>
	<view class="container">
		<view class="form">
			<block v-if="type === 1">
				<view class="form_item">
					<view class="label">车辆品牌</view>
					<view class="content">
						<u-input v-model="fieldObj.carDiy" type="number" maxlength="11" placeholder="请输入车辆品牌"
							border="none"></u-input>
					</view>
				</view>
			</block>
			<block v-else-if="type === 2">
				<view class="form_item">
					<view class="label">联系电话</view>
					<view class="content">
						<u-input v-model="fieldObj.phone" type="number" maxlength="11" placeholder="请输入联系电话"
							border="none"></u-input>
					</view>
				</view>
				<view class="form_item">
					<view class="label">短信验证</view>
					<view class="content">
						<u-input v-model="fieldObj.vcode" placeholder="请输入短信验证" border="none">
							<template slot="suffix">
								<view class="get_note" @click="onGetCode">{{codeText}}</view>
							</template>
						</u-input>
					</view>
				</view>
			</block>
			<view class="submit" @click="onSubmit">确认</view>
		</view>
	</view>
</template>

<script>
	import {
		requsetGet
	} from '@/utlis/request.js'
	export default {
		data() {
			return {
				fieldObj: {},
				fieldKeys: '',
				type: 1,
				codeText: '获取验证码',
				isButStyle: true,

			}
		},
		onLoad(option) {
			let obj = {};
			const fieldKeys = []
			// this.fieldKeys = option.field;
			option.field.split(',').forEach((keys) => {
				if (keys.includes(':')) {
					const [key, value] = keys.split(':');
					obj = {
						...obj,
						[key]: value
					}
					fieldKeys.push(key)
				} else {
					obj = {
						...obj,
						[keys]: ''
					}
					fieldKeys.push(keys)
				}

			});
			this.fieldKeys = fieldKeys.join(',');
			this.fieldObj = obj;
			switch (option.title) {
				case '车辆类型':
					this.type = 1;
					break;
				case '联系方式':
					this.type = 2;
					break;
			}
			uni.setNavigationBarTitle({
				title: option.title
			})
		},
		methods: {
			onSubmit() {
				const values = {
					...this.fieldObj
				}
				if (this.type === 2) {
					if (!(/^1[3-9]\d{9}$/.test(values.phone))) {
						return uni.showToast({
							title: `请输入一个正确的手机号码`,
							icon: 'none'
						})
					}
					if (!values.vcode) {
						return uni.showToast({
							title: `请输入验证码`,
							icon: 'none'
						})
					}
					uni.$emit('fieldValue', {
						form: values,
						fieldKeys: this.fieldKeys
					});
				} else {
					uni.$emit('fieldValue', {
						form: values,
						fieldKeys: this.fieldKeys
					});
				}
				uni.navigateBack({
					delta: 1
				})
			},
			async onGetCode() {
				const phone = this.fieldObj.phone;
				let count = 60;
				let flag;
				if (!(/^1[3-9]\d{9}$/.test(phone))) {
					return uni.showToast({
						title: `请输入一个正确的手机号码`,
						icon: 'none'
					})
				}
				if (this.isButStyle) {
					await requsetGet('/ClientUserController/sendSMSVcode', {
						phone
					});
					uni.showToast({
						title: `发送成功`,
						icon: 'success'
					});
					flag = setInterval(() => {
						count--;
						this.codeText = `${count}秒`;
						if (count === 0) {
							this.codeText = '重新获取';
							count = 60;
							this.isButStyle = true;
							clearInterval(flag);
						}
					}, 1000);
				}
				this.isButStyle = false;
			},
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="less" scoped>
	.submit {
		margin: 80rpx auto;
		width: 430rpx;
		line-height: 92rpx;
		text-align: center;
		background: linear-gradient(135deg, #FF9D47 0%, #FF6933 100%);
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		border-radius: 52rpx;
	}

	.get_note {
		text-align: center;
		border-radius: 8rpx;
		color: #FF6933;
		margin-right: 16rpx;
	}

	.form {
		padding: 48rpx 0;
		width: 95%;
		margin: auto;

		.form_item {
			margin-bottom: 48rpx;

			.label {
				font-size: 28rpx;
				font-weight: 500;
				color: #666666;
				margin-left: 24rpx;
				margin-bottom: 16rpx;
			}

			.content {
				display: flex;
				align-items: center;
				width: 702rpx;
				height: 96rpx;
				background: #F5F7FA;
				border-radius: 16rpx;
			}

			.radio_buttom_content {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 702rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin: 0 16rpx;
				}

				.radio_item2,
				.radio_item {
					display: flex;
					align-items: center;
					width: 340rpx;
					line-height: 96rpx;
					background: #F5F7FA;
					border-radius: 16rpx;
				}

				.radio_item2 {
					background: #FFFFFF;
					border-radius: 16rpx;
					border: 2rpx solid #F5F7FA;
					width: 338rpx;
				}
			}

			.submit_buttom {
				width: 702rpx;
				line-height: 104rpx;
				background-color: #297EFF;
				color: #fff;
				font-size: 40rpx;
				font-weight: 500;
				text-align: center;
				border-radius: 52rpx;
			}
		}
	}
</style>